<template>
  <!-- <h3>示例</h3> -->
  <ul class="ul">
    <li class="li">
      <span class="icon a-iconfont a-icon-caps-lock"></span>
      <div class="name">caps-lock</div>
      <div class="code-name">a-icon-caps-lock</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-camera"></span>
      <div class="name">camera</div>
      <div class="code-name">a-icon-camera</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-chart-bar"></span>
      <div class="name">chart-bar</div>
      <div class="code-name">a-icon-chart-bar</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-attachment"></span>
      <div class="name">attachment</div>
      <div class="code-name">a-icon-attachment</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-code"></span>
      <div class="name">code</div>
      <div class="code-name">a-icon-code</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-close"></span>
      <div class="name">close</div>
      <div class="code-name">a-icon-close</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-check-item"></span>
      <div class="name">check-item</div>
      <div class="code-name">a-icon-check-item</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-calendar"></span>
      <div class="name">calendar</div>
      <div class="code-name">a-icon-calendar</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-comment"></span>
      <div class="name">comment</div>
      <div class="code-name">a-icon-comment</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-column-vertical"></span>
      <div class="name">column-vertical</div>
      <div class="code-name">a-icon-column-vertical</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-column-horizontal"></span>
      <div class="name">column-horizontal</div>
      <div class="code-name">a-icon-column-horizontal</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-complete"></span>
      <div class="name">complete</div>
      <div class="code-name">a-icon-complete</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-chart-pie"></span>
      <div class="name">chart-pie</div>
      <div class="code-name">a-icon-chart-pie</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-cry"></span>
      <div class="name">cry</div>
      <div class="code-name">a-icon-cry</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-customer-service"></span>
      <div class="name">customer-service</div>
      <div class="code-name">a-icon-customer-service</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-delete"></span>
      <div class="name">delete</div>
      <div class="code-name">a-icon-delete</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-direction-down"></span>
      <div class="name">direction-down</div>
      <div class="code-name">a-icon-direction-down</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-copy"></span>
      <div class="name">copy</div>
      <div class="code-name">a-icon-copy</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-cut"></span>
      <div class="name">cut</div>
      <div class="code-name">a-icon-cut</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-data-view"></span>
      <div class="name">data-view</div>
      <div class="code-name">a-icon-data-view</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-direction-down-circle"></span>
      <div class="name">direction-down-circle</div>
      <div class="code-name">a-icon-direction-down-circle</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-direction-right"></span>
      <div class="name">direction-right</div>
      <div class="code-name">a-icon-direction-right</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-direction-up"></span>
      <div class="name">direction-up</div>
      <div class="code-name">a-icon-direction-up</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-discount"></span>
      <div class="name">discount</div>
      <div class="code-name">a-icon-discount</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-direction-left"></span>
      <div class="name">direction-left</div>
      <div class="code-name">a-icon-direction-left</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-download"></span>
      <div class="name">download</div>
      <div class="code-name">a-icon-download</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-electronics"></span>
      <div class="name">electronics</div>
      <div class="code-name">a-icon-electronics</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-drag"></span>
      <div class="name">drag</div>
      <div class="code-name">a-icon-drag</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-elipsis"></span>
      <div class="name">elipsis</div>
      <div class="code-name">a-icon-elipsis</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-export"></span>
      <div class="name">export</div>
      <div class="code-name">a-icon-export</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-explain"></span>
      <div class="name">explain</div>
      <div class="code-name">a-icon-explain</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-edit"></span>
      <div class="name">edit</div>
      <div class="code-name">a-icon-edit</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-eye-close"></span>
      <div class="name">eye-close</div>
      <div class="code-name">a-icon-eye-close</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-email"></span>
      <div class="name">email</div>
      <div class="code-name">a-icon-email</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-error"></span>
      <div class="name">error</div>
      <div class="code-name">a-icon-error</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-favorite"></span>
      <div class="name">favorite</div>
      <div class="code-name">a-icon-favorite</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-file-common"></span>
      <div class="name">file-common</div>
      <div class="code-name">a-icon-file-common</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-file-delete"></span>
      <div class="name">file-delete</div>
      <div class="code-name">a-icon-file-delete</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-file-add"></span>
      <div class="name">file-add</div>
      <div class="code-name">a-icon-file-add</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-film"></span>
      <div class="name">film</div>
      <div class="code-name">a-icon-film</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-fabulous"></span>
      <div class="name">fabulous</div>
      <div class="code-name">a-icon-fabulous</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-file"></span>
      <div class="name">file</div>
      <div class="code-name">a-icon-file</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-folder-close"></span>
      <div class="name">folder-close</div>
      <div class="code-name">a-icon-folder-close</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-filter"></span>
      <div class="name">filter</div>
      <div class="code-name">a-icon-filter</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-good"></span>
      <div class="name">good</div>
      <div class="code-name">a-icon-good</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-hide"></span>
      <div class="name">hide</div>
      <div class="code-name">a-icon-hide</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-home"></span>
      <div class="name">home</div>
      <div class="code-name">a-icon-home</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-history"></span>
      <div class="name">history</div>
      <div class="code-name">a-icon-history</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-file-open"></span>
      <div class="name">file-open</div>
      <div class="code-name">a-icon-file-open</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-forward"></span>
      <div class="name">forward</div>
      <div class="code-name">a-icon-forward</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-import"></span>
      <div class="name">import</div>
      <div class="code-name">a-icon-import</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-image-text"></span>
      <div class="name">image-text</div>
      <div class="code-name">a-icon-image-text</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-keyboard-26"></span>
      <div class="name">keyboard-26</div>
      <div class="code-name">a-icon-keyboard-26</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-keyboard-9"></span>
      <div class="name">keyboard-9</div>
      <div class="code-name">a-icon-keyboard-9</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-link"></span>
      <div class="name">link</div>
      <div class="code-name">a-icon-link</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-layout"></span>
      <div class="name">layout</div>
      <div class="code-name">a-icon-layout</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-fullscreen-shrink"></span>
      <div class="name">fullscreen-shrink</div>
      <div class="code-name">a-icon-fullscreen-shrink</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-layers"></span>
      <div class="name">layers</div>
      <div class="code-name">a-icon-layers</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-lock"></span>
      <div class="name">lock</div>
      <div class="code-name">a-icon-lock</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-fullscreen-expand"></span>
      <div class="name">fullscreen-expand</div>
      <div class="code-name">a-icon-fullscreen-expand</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-map"></span>
      <div class="name">map</div>
      <div class="code-name">a-icon-map</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-meh"></span>
      <div class="name">meh</div>
      <div class="code-name">a-icon-meh</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-menu"></span>
      <div class="name">menu</div>
      <div class="code-name">a-icon-menu</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-loading"></span>
      <div class="name">loading</div>
      <div class="code-name">a-icon-loading</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-help"></span>
      <div class="name">help</div>
      <div class="code-name">a-icon-help</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-minus-circle"></span>
      <div class="name">minus-circle</div>
      <div class="code-name">a-icon-minus-circle</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-modular"></span>
      <div class="name">modular</div>
      <div class="code-name">a-icon-modular</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-notification"></span>
      <div class="name">notification</div>
      <div class="code-name">a-icon-notification</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-mic"></span>
      <div class="name">mic</div>
      <div class="code-name">a-icon-mic</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-more"></span>
      <div class="name">more</div>
      <div class="code-name">a-icon-more</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-operation"></span>
      <div class="name">operation</div>
      <div class="code-name">a-icon-operation</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-play"></span>
      <div class="name">play</div>
      <div class="code-name">a-icon-play</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-print"></span>
      <div class="name">print</div>
      <div class="code-name">a-icon-print</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-mobile-phone"></span>
      <div class="name">mobile-phone</div>
      <div class="code-name">a-icon-mobile-phone</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-minus"></span>
      <div class="name">minus</div>
      <div class="code-name">a-icon-minus</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-navigation"></span>
      <div class="name">navigation</div>
      <div class="code-name">a-icon-navigation</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-pdf"></span>
      <div class="name">pdf</div>
      <div class="code-name">a-icon-pdf</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-prompt"></span>
      <div class="name">prompt</div>
      <div class="code-name">a-icon-prompt</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-move"></span>
      <div class="name">move</div>
      <div class="code-name">a-icon-move</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-refresh"></span>
      <div class="name">refresh</div>
      <div class="code-name">a-icon-refresh</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-picture"></span>
      <div class="name">picture</div>
      <div class="code-name">a-icon-picture</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-pin"></span>
      <div class="name">pin</div>
      <div class="code-name">a-icon-pin</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-save"></span>
      <div class="name">save</div>
      <div class="code-name">a-icon-save</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-search"></span>
      <div class="name">search</div>
      <div class="code-name">a-icon-search</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-share"></span>
      <div class="name">share</div>
      <div class="code-name">a-icon-share</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-scanning"></span>
      <div class="name">scanning</div>
      <div class="code-name">a-icon-scanning</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-security"></span>
      <div class="name">security</div>
      <div class="code-name">a-icon-security</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-sign-out"></span>
      <div class="name">sign-out</div>
      <div class="code-name">a-icon-sign-out</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-select"></span>
      <div class="name">select</div>
      <div class="code-name">a-icon-select</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-stop"></span>
      <div class="name">stop</div>
      <div class="code-name">a-icon-stop</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-success"></span>
      <div class="name">success</div>
      <div class="code-name">a-icon-success</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-smile"></span>
      <div class="name">smile</div>
      <div class="code-name">a-icon-smile</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-switch"></span>
      <div class="name">switch</div>
      <div class="code-name">a-icon-switch</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-setting"></span>
      <div class="name">setting</div>
      <div class="code-name">a-icon-setting</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-survey"></span>
      <div class="name">survey</div>
      <div class="code-name">a-icon-survey</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-task"></span>
      <div class="name">task</div>
      <div class="code-name">a-icon-task</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-skip"></span>
      <div class="name">skip</div>
      <div class="code-name">a-icon-skip</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-text"></span>
      <div class="name">text</div>
      <div class="code-name">a-icon-text</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-time"></span>
      <div class="name">time</div>
      <div class="code-name">a-icon-time</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-telephone-out"></span>
      <div class="name">telephone-out</div>
      <div class="code-name">a-icon-telephone-out</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-toggle-left"></span>
      <div class="name">toggle-left</div>
      <div class="code-name">a-icon-toggle-left</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-toggle-right"></span>
      <div class="name">toggle-right</div>
      <div class="code-name">a-icon-toggle-right</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-telephone"></span>
      <div class="name">telephone</div>
      <div class="code-name">a-icon-telephone</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-top"></span>
      <div class="name">top</div>
      <div class="code-name">a-icon-top</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-unlock"></span>
      <div class="name">unlock</div>
      <div class="code-name">a-icon-unlock</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-user"></span>
      <div class="name">user</div>
      <div class="code-name">a-icon-user</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-upload"></span>
      <div class="name">upload</div>
      <div class="code-name">a-icon-upload</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-work"></span>
      <div class="name">work</div>
      <div class="code-name">a-icon-work</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-warning"></span>
      <div class="name">warning</div>
      <div class="code-name">a-icon-warning</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-zoom-in"></span>
      <div class="name">zoom-in</div>
      <div class="code-name">a-icon-zoom-in</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-zoom-out"></span>
      <div class="name">zoom-out</div>
      <div class="code-name">a-icon-zoom-out</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-add-bold"></span>
      <div class="name">add-bold</div>
      <div class="code-name">a-icon-add-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-left-bold"></span>
      <div class="name">arrow-left-bold</div>
      <div class="code-name">a-icon-arrow-left-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-up-bold"></span>
      <div class="name">arrow-up-bold</div>
      <div class="code-name">a-icon-arrow-up-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-close-bold"></span>
      <div class="name">close-bold</div>
      <div class="code-name">a-icon-close-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-down-bold"></span>
      <div class="name">arrow-down-bold</div>
      <div class="code-name">a-icon-arrow-down-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-minus-bold"></span>
      <div class="name">minus-bold</div>
      <div class="code-name">a-icon-minus-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-right-bold"></span>
      <div class="name">arrow-right-bold</div>
      <div class="code-name">a-icon-arrow-right-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-select-bold"></span>
      <div class="name">select-bold</div>
      <div class="code-name">a-icon-select-bold</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-up-filling"></span>
      <div class="name">arrow-up-filling</div>
      <div class="code-name">a-icon-arrow-up-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-down-filling"></span>
      <div class="name">arrow-down-filling</div>
      <div class="code-name">a-icon-arrow-down-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-left-filling"></span>
      <div class="name">arrow-left-filling</div>
      <div class="code-name">a-icon-arrow-left-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-right-filling"></span>
      <div class="name">arrow-right-filling</div>
      <div class="code-name">a-icon-arrow-right-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-caps-unlock-filling"></span>
      <div class="name">caps-unlock-filling</div>
      <div class="code-name">a-icon-caps-unlock-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-comment-filling"></span>
      <div class="name">comment-filling</div>
      <div class="code-name">a-icon-comment-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-check-item-filling"></span>
      <div class="name">check-item-filling</div>
      <div class="code-name">a-icon-check-item-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-clock-filling"></span>
      <div class="name">clock-filling</div>
      <div class="code-name">a-icon-clock-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-delete-filling"></span>
      <div class="name">delete-filling</div>
      <div class="code-name">a-icon-delete-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-decline-filling"></span>
      <div class="name">decline-filling</div>
      <div class="code-name">a-icon-decline-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-dynamic-filling"></span>
      <div class="name">dynamic-filling</div>
      <div class="code-name">a-icon-dynamic-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-intermediate-filling"></span>
      <div class="name">intermediate-filling</div>
      <div class="code-name">a-icon-intermediate-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-favorite-filling"></span>
      <div class="name">favorite-filling</div>
      <div class="code-name">a-icon-favorite-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-layout-filling"></span>
      <div class="name">layout-filling</div>
      <div class="code-name">a-icon-layout-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-help-filling"></span>
      <div class="name">help-filling</div>
      <div class="code-name">a-icon-help-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-history-filling"></span>
      <div class="name">history-filling</div>
      <div class="code-name">a-icon-history-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-filter-filling"></span>
      <div class="name">filter-filling</div>
      <div class="code-name">a-icon-filter-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-file-common-filling"></span>
      <div class="name">file-common-filling</div>
      <div class="code-name">a-icon-file-common-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-news-filling"></span>
      <div class="name">news-filling</div>
      <div class="code-name">a-icon-news-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-edit-filling"></span>
      <div class="name">edit-filling</div>
      <div class="code-name">a-icon-edit-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-fullscreen-expand-filling"></span>
      <div class="name">fullscreen-expand-filling</div>
      <div class="code-name">a-icon-fullscreen-expand-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-smile-filling"></span>
      <div class="name">smile-filling</div>
      <div class="code-name">a-icon-smile-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-rise-filling"></span>
      <div class="name">rise-filling</div>
      <div class="code-name">a-icon-rise-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-picture-filling"></span>
      <div class="name">picture-filling</div>
      <div class="code-name">a-icon-picture-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-notification-filling"></span>
      <div class="name">notification-filling</div>
      <div class="code-name">a-icon-notification-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-user-filling"></span>
      <div class="name">user-filling</div>
      <div class="code-name">a-icon-user-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-setting-filling"></span>
      <div class="name">setting-filling</div>
      <div class="code-name">a-icon-setting-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-switch-filling"></span>
      <div class="name">switch-filling</div>
      <div class="code-name">a-icon-switch-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-work-filling"></span>
      <div class="name">work-filling</div>
      <div class="code-name">a-icon-work-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-task-filling"></span>
      <div class="name">task-filling</div>
      <div class="code-name">a-icon-task-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-success-filling"></span>
      <div class="name">success-filling</div>
      <div class="code-name">a-icon-success-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-warning-filling"></span>
      <div class="name">warning-filling</div>
      <div class="code-name">a-icon-warning-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-folder-filling"></span>
      <div class="name">folder-filling</div>
      <div class="code-name">a-icon-folder-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-map-filling"></span>
      <div class="name">map-filling</div>
      <div class="code-name">a-icon-map-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-prompt-filling"></span>
      <div class="name">prompt-filling</div>
      <div class="code-name">a-icon-prompt-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-meh-filling"></span>
      <div class="name">meh-filling</div>
      <div class="code-name">a-icon-meh-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-cry-filling"></span>
      <div class="name">cry-filling</div>
      <div class="code-name">a-icon-cry-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-top-filling"></span>
      <div class="name">top-filling</div>
      <div class="code-name">a-icon-top-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-home-filling"></span>
      <div class="name">home-filling</div>
      <div class="code-name">a-icon-home-filling</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-sorting"></span>
      <div class="name">sorting</div>
      <div class="code-name">a-icon-sorting</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-3column"></span>
      <div class="name">column-3</div>
      <div class="code-name">a-icon-3column</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-column-4"></span>
      <div class="name">column-4</div>
      <div class="code-name">a-icon-column-4</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-add"></span>
      <div class="name">add</div>
      <div class="code-name">a-icon-add</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-add-circle"></span>
      <div class="name">add-circle</div>
      <div class="code-name">a-icon-add-circle</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-adjust"></span>
      <div class="name">adjust</div>
      <div class="code-name">a-icon-adjust</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-up-circle"></span>
      <div class="name">arrow-up-circle</div>
      <div class="code-name">a-icon-arrow-up-circle</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-right-circle"></span>
      <div class="name">arrow-right-circle</div>
      <div class="code-name">a-icon-arrow-right-circle</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-down"></span>
      <div class="name">arrow-down</div>
      <div class="code-name">a-icon-arrow-down</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-ashbin"></span>
      <div class="name">ashbin</div>
      <div class="code-name">a-icon-ashbin</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-right"></span>
      <div class="name">arrow-right</div>
      <div class="code-name">a-icon-arrow-right</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-browse"></span>
      <div class="name">browse</div>
      <div class="code-name">a-icon-browse</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-bottom"></span>
      <div class="name">bottom</div>
      <div class="code-name">a-icon-bottom</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-back"></span>
      <div class="name">back</div>
      <div class="code-name">a-icon-back</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-bad"></span>
      <div class="name">bad</div>
      <div class="code-name">a-icon-bad</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-double-left"></span>
      <div class="name">arrow-double-left</div>
      <div class="code-name">a-icon-arrow-double-left</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-left-circle"></span>
      <div class="name">arrow-left-circle</div>
      <div class="code-name">a-icon-arrow-left-circle</div>
    </li>

    <li class="li">
      <span class="icon a-iconfont a-icon-arrow-double-right"></span>
      <div class="name">arrow-double-right</div>
      <div class="code-name">a-icon-arrow-double-right</div>
    </li>
  </ul>
</template>

<script setup>
</script>

<style lang="less" scoped>
.ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  .li {
    display: flex;
    flex-direction: column;
    width: 20%;
    padding: 20px 0;
  }

  .icon {
    color: #808080;
    font-size: 40px;
  }
  .name {
    display: none;
  }
  .code-name {
    margin-top: 10px;
    font-size: 18px;
    color: #555;
  }
}
</style>